<template>
  <div class="empInformAdd">
    <div class="empInformAdd-tittle">
      <div class="crumbs">
        <p>
          <span>设置 /</span><span> Banner图管理 /</span> 新建Banner图信息<span
          ></span>
        </p>
        <h3>新建Banner图</h3>
      </div>
    </div>
    <div class="baseMsg">
      <div class="base-title">基础信息</div>
      <div class="base-content">
        <div class="content-one">
          <span>Bannert图名称</span
          ><el-input
            v-model="bannerName"
            placeholder="请输入"
            style="width: 400px"
          />
        </div>
        <div class="content-one">
          <span>Bannert图</span>
          <div class="touxiang">
            <el-upload
              action="http://123.57.203.155:8077/oss/upload"
              list-type="picture-card"
              :auto-upload="true"
              :limit="1"
              :on-success="handle_success"
              ref="pictureUpload"
            >
              <el-icon><Plus /></el-icon>
              <template #file="{ file }">
                <div>
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url"
                    alt=""
                  />
                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                    >
                      <el-icon><zoom-in /></el-icon>
                    </span>
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleDownload(file)"
                    >
                      <el-icon><Download /></el-icon>
                    </span>
                  </span>
                </div>
              </template>
            </el-upload>

            <el-dialog v-model="dialogVisible">
              <img w-full :src="dialogImageUrl" alt="Preview Image" />
            </el-dialog>
          </div>
        </div>

        <!-- <div class="content-one">
          <span>链接</span>
          <el-input v-model="input" placeholder="请输入" style="width: 400px" />
        </div> -->
        <div class="content-one">
          <span>排序号</span>
          <el-input
            v-model="sortNo"
            placeholder="请输入"
            style="width: 400px"
          />
        </div>

        <div class="dispose">
          <el-button type="primary" @click="addRole">提交</el-button>
          <el-button type="primary" plain @click="goBacak">返回</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import axios from "../../utils/http";
import timeTrans from "../../utils/time";
import { ElMessage } from "element-plus";
import type { UploadFile } from "element-plus";

// 上传图片

const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const disabled = ref(false);

// 上传成功后返回的地址
const imgSrc = ref("");

const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!;
  dialogVisible.value = true;
};

const handleDownload = (file: UploadFile) => {
  console.log(file, "11111");
};
const handle_success = (res) => {
  console.log(res);
  if (res.code == 0) {
    imgSrc.value = res.data.url;
  }
};

// 上传图片完

const router = useRouter();
const route = useRoute();
const input = ref("");
const textarea = ref("");

onMounted(() => {});
// 返回
const goBacak = () => {
  router.go(-1);
};

// 提交
const bannerName = ref("");
const sortNo = ref("");
let addPersonId = sessionStorage.getItem("id");
console.log(typeof addPersonId);

const addRole = () => {
  let nowDate = Date.now();
  let getTime = timeTrans(nowDate);

  console.log(imgSrc.value);
  axios({
    url: "/mapManagement/add",
    method: "post",
    data: {
      addPersonId: addPersonId,
      addTime: getTime,
      bannerGraphSrc: imgSrc.value,
      bannerName: bannerName.value,
      sortNo: sortNo.value,
    },
  }).then(({ data }) => {
    console.log(data);
    if (data.code == 0) {
      router.go(-1);
      ElMessage({
        message: "添加成功",
        type: "success",
      });
    }
  });
};
</script>

<style lang="less" scoped>
.empInformAdd {
  width: 90%;
  margin: auto;
  // border: 1px solid red;
  .empInformAdd-tittle {
    // border: 1px solid red;
    background-color: white;
    margin-top: 20px;
    margin-bottom: 20px;
    .crumbs {
      padding: 20px 20px;
      font-size: 16px;
      border-bottom: 1px solid #ccc;
      p {
        margin-bottom: 10px;
        span:nth-child(1),
        span:nth-child(2) {
          color: #8d8d8d;
        }
        span:last-child {
          color: #000;
        }
      }
    }
  }
  .baseMsg {
    background-color: white;
    // margin-top: 20px;
    margin-bottom: 20px;
    padding: 20px 20px;
    .base-title {
      margin-bottom: 10px;
    }
    .base-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      .content-one {
        margin-bottom: 20px;
        display: flex;
        justify-content: center;
        span {
          width: 200px;
          text-align: end;
          margin-right: 15px;
        }
        .touxiang {
          width: 400px;
        }
      }
      .dispose {
        padding: 20px 30px;
        margin-top: 20px;
      }
    }
  }
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 140px;
  height: 140px;
  text-align: center;
}
</style>

<style lang="less">
.el-dialog__body {
  img {
    width: 700px;
    height: 100%;
  }
}
</style>
